<template>
    <div>
        <div class="operarea">
            <div class="seach">
                <el-input v-model="seachForm.name" placeholder="名字" clearable size="mini" @keyup.enter.native="seachData"></el-input>
                <el-button size="mini" icon="el-icon-search" @click="seachData"></el-button>
            </div>
            <div class="btnList">
                <el-button size="mini" @click="showAddData">{{$t('add')}}</el-button>
                <el-button size="mini" @click="showDelData">{{$t('delete')}}</el-button>
            </div>
        </div>
        <el-card class="cardBox">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>成品</el-breadcrumb-item>
                <el-breadcrumb-item>场景管理</el-breadcrumb-item>
            </el-breadcrumb>
            <el-table style="width: 100%" ref="sceneTable" :data="sceneTab" stripe v-adaptive="{bottomOffset: 85}" height="100" row-key="id" @selection-change="handleSelectionChange" @select-all="handleSelectionChange">
                <el-table-column type="selection" :reserve-selection="true">
                </el-table-column>
                <el-table-column prop="name" label="场景名称">
                </el-table-column>
                <el-table-column prop="imgUrl" label="图片">
                    <template v-slot="scope">
                        <el-image v-if="scope.row.imgUrl !== '' && scope.row.imgUrl !== null" :src="scope.row.imgUrl" class="feelImg" :preview-src-list="getSrcList(scope.$index)"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="address" width="120" :label="$t('details')" fixed="right">
                    <template v-slot="scope">
                        <el-button @click.stop="showEditDlog(scope.row)" size="mini">编辑</el-button>
                        <!-- <el-button @click.stop="showDelData(scope.row.id)" size="mini">删除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                small
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :pager-count="11"
                :current-page.sync="seachForm.pageNo"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="seachForm.pageSize"
                layout="sizes, prev, pager, next"
                :total="total">
            </el-pagination>
        </el-card>
        <!-- 添加 -->
        <el-dialog :title="$t('add')" :visible.sync="addDialogVisible" width="600px" class="addNFRobeDlog" :close-on-click-modal="false" @close="addDlogClose(addForm)">
            <el-form :model="addForm" :ref="addForm" :rules="addRules" label-position="left" label-width="80px">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="addForm.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="相关图片" prop="imgUrl">
                    <el-upload class="upload-demo" action="/sys/image/uploadImage" :on-success="handleImgUrl" :on-remove="hadleRemove" :file-list="fileList" list-type="picture" :limit="1" :on-exceed="scotland" ref="sunsetstripk">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">返回</el-button>
                <el-button type="primary" @click="addData()">保存</el-button>
            </span>
        </el-dialog>
        <!-- 修改 -->
        <el-dialog title="编辑" :visible.sync="editDialogVisible" width="600px" class="addNFRobeDlog" :close-on-click-modal="false" @close="editDlogClose(editForm)">
            <el-form :model="editForm" :ref="editForm" :rules="editRules" label-position="left" label-width="80px">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="editForm.name" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="相关图片" prop="imgUrl">
                    <el-upload class="upload-demo" action="/sys/image/uploadImage" :on-success="handleImgUrl" :on-remove="hadleRemove" :file-list="fileList" list-type="picture" :limit="1" :on-exceed="scotland" ref="sunsetstripk">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">返回</el-button>
                <el-button type="primary" @click="editData()">保存</el-button>
            </span>
        </el-dialog>
        <!-- 删除 -->
        <el-dialog :title="$t('hint')" :visible.sync="delDialogVisible" width="420px" class="smallDlog" @close="delDlogClose()">
            <span>{{$t('confirmdel')}}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delDialogVisible = false">{{$t('cancel')}}</el-button>
                <el-button type="primary" @click="delData">{{$t('confirm')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getSceneList,
    addScene,
    updateScene,
    deleteScene
} from '@/libs/reqlist.js'
export default {
    data () {
        return {
            total: 0,
            seachForm: {
                name: '',
                pageNo: 1,
                pageSize: 10
            },
            type: '',
            sceneTab: [],
            imgList: [],
            selTabData: [],
            doType: 0,
            fileList: [],
            addDialogVisible: false,
            addForm: {
                name: '',	
                imgUrl: ''
            },
            addRules: {
                name: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ],
                imgUrl: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'change'}
                ]
            },
            editDialogVisible: false,
            editForm: {
                id: '',
                name: '',
                imgUrl: ''
            },
            editRules: {
                name: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'blur'}
                ],
                imgUrl: [
                    { required: true, message: this.$t('cannotbeemp'), trigger: 'change'}
                ]
            },
            delDialogVisible: false,
            ids: []
        }
    },
    methods: {
        getData () {
            this.imgList = []
            getSceneList(JSON.stringify(this.seachForm)).then(res => {
                if (res.data.code == 0) {
                    res.data.data.data.forEach(item => {
                        if (item.imgUrl !== null && item.imgUrl !== '') this.imgList.push(item.imgUrl)
                    })
                    this.sceneTab = res.data.data.data
                    this.total = res.data.data.hits
                }
            })
        },
        seachData () {
            this.seachForm.pageNo = 1
            this.getData()
        },
        getSrcList(index) {
            return this.imgList.slice(index).concat(this.imgList.slice(0, index))
        },
        handleSizeChange (newSize) {
            this.seachForm.pageSize = newSize
            this.getData()
        },
        handleCurrentChange (newNum) {
            this.seachForm.pageNo = newNum
            this.getData()
        },
        handleSelectionChange (select) {
            this.selTabData = select
        },
        // 图片上传相关
        scotland() {
            this.$message.warning('只能选择一个文件')
        },
        handleImgUrl(res) {
            if (res.code == 0) {
                switch (this.doType) {
                    case 0:
                        this.addForm.imgUrl = res.data
                        break
                    case 1:
                        this.editForm.imgUrl = res.data
                        break
                }
            }
        },
        hadleRemove(file) {
            if (file) {
                switch (this.doType) {
                    case 0:
                        this.fileList = []
                        this.addForm.imgUrl = ''
                        break
                    case 1:
                        this.fileList = []
                        this.editForm.imgUrl = ''
                        break
                }
            }
        },
        showAddData() {
            this.doType = 0
            this.addDialogVisible = true
        },
        addData() {
            if (this.addForm.name == '' || this.addForm.name == null) return this.$message.warning('请填写场景名称')
            if (this.addForm.imgUrl == '' || this.addForm.imgUrl == null) return this.$message.warning('请上传场景相关图片')
            addScene(JSON.stringify(this.addForm)).then(res => {
                if (res.data.code == 0) {
                    this.addDialogVisible = false
                    this.getData()
                    this.$message.success('添加场景成功')
                }
            })
        },
        addDlogClose(form) {
            this.addForm.name = ''
            this.addForm.imgUrl = ''
            this.fileList = []
            this.$refs[form].resetFields()
        },
        showEditDlog(item) {
            this.editForm.id = item.id
            this.editForm.name = item.name
            this.editForm.imgUrl = item.imgUrl
            if (this.editForm.imgUrl !== '' && this.editForm.imgUrl !== null) this.fileList.push({ name: this.editForm.name, url: this.editForm.imgUrl })
            this.doType = 1
            this.editDialogVisible = true
        },
        editData() {
            if (this.editForm.name == '' || this.editForm.name == null) return this.$message.warning('请填写场景名称')
            if (this.editForm.imgUrl == '' || this.editForm.imgUrl == null) return this.$message.warning('请上传场景相关图片')
            updateScene(JSON.stringify(this.editForm)).then(res => {
                if (res.data.code == 0) {
                    this.editDialogVisible = false
                    this.getData()
                    this.$message.success('修改场景成功')
                }
            })
        },
        editDlogClose(form) {
            this.editForm.id = ''
            this.editForm.name = ''
            this.editForm.imgUrl = ''
            this.fileList = []
            this.$refs[form].resetFields()
        },
        showDelData() {
            if (this.selTabData.length === 0) return this.$message.warning('请先选择要操作的场景')
            this.delDialogVisible = true
            this.selTabData.forEach(item => {
                this.ids.push(item.id)
            })
        },
        delData() {
            deleteScene(JSON.stringify({ ids: this.ids, deleteStatus: 1 })).then(res => {
                if (res.data.code == 0) {
                    this.delDialogVisible = false
                    this.getData()
                    this.$message.success('删除成功')
                    this.$refs.sceneTable.clearSelection()
                }
            })
        },
        delDlogClose() {
            this.ids = []
        }
    },
    mounted() {
        this.getData()
    }
}
</script>

<style lang="less" scoped>
@import './scene.less';
</style>
